<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jqLite</title>
    <link rel="stylesheet" href="./libs/css/bootstrap.css">
</head>
<body ng-app="app">
     <div ng-controller="demoCtrl" class="container">
         <div id="box"></div>
        <button ng-click="changeStyle()" class="btn btn-primary">修改样式</button>
     </div>   
</body>
<script src="./libs/js/angular-1.6.9.min.js"></script>
<script>
    var app=angular.module('app',[]);
    app.controller('demoCtrl',['$scope',function($scope){
        $scope.boxStyle={border:'1px solid red',height:'100px'};
        $scope.changeStyle=function(){
            //angular.element()需要一个dom对象
            var box=angular.element(document.getElementById('box'));
            box.addClass('alert alert-success').css({borderRadius:'3px',border:'1px solid #CCC'});
        }
    }]);
    //jqLite初始化函数:页面加载完后立即给div#box设置一个样式
    angular.element(document).ready(function(){
        var box=angular.element(document.getElementById('box'));
        box.css({border:'1px solid red',height:'100px'});
    });
</script>
</html>